<template>
  <div class="order-form">
    <!-- 查询和重置区域 -->
    <div class="query-reset">
      <el-input
        v-model="queryKey"
        placeholder="输入查询内容"
        style="width: 300px; margin-right: 10px;"
      ></el-input>
      <el-button type="primary" @click="handleQuery">查询</el-button>
      <el-button @click="handleReset">重置</el-button>
    </div>

    <!-- 下单表单 -->
    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" style="margin-top: 20px;">
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="form.nickname"></el-input>
      </el-form-item>
      <el-form-item label="能源币" prop="energyCoin">
        <el-input v-model.number="form.energyCoin"></el-input>
      </el-form-item>
      <el-form-item label="消费项目" prop="consumptionItem">
        <el-select v-model="form.consumptionItem" placeholder="请选择消费项目">
          <el-option label="保养" value="保养"></el-option>
          <el-option label="维修" value="维修"></el-option>
          <el-option label="洗车" value="洗车"></el-option>
          <!-- 可根据需要添加更多选项 -->
        </el-select>
      </el-form-item>
      <el-form-item label="工单号" prop="workOrderNo">
        <el-input v-model="form.workOrderNo"></el-input>
      </el-form-item>
      <el-form-item label="车牌号" prop="carNumber">
        <el-input v-model="form.carNumber"></el-input>
      </el-form-item>
      <el-form-item label="车架号" prop="frameNo">
        <el-input v-model="form.frameNo"></el-input>
      </el-form-item>
      <el-form-item label="消费金额" prop="consumptionAmount">
        <el-input v-model.number="form.consumptionAmount"></el-input>
      </el-form-item>
      <el-form-item label="抵扣能量币" prop="deductEnergyCoin">
        <el-input v-model.number="form.deductEnergyCoin"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="form.remark"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

const queryKey = ref(''); // 查询关键字
const formRef = ref(null); // 表单引用

// 表单数据
const form = reactive({
  nickname: '111',
  energyCoin: 478,
  consumptionItem: '保养',
  workOrderNo: '457832856548',
  carNumber: '京A GH945',
  frameNo: '7',
  consumptionAmount: 1000,
  deductEnergyCoin: 0,
  remark: '尽量快些'
});

// 表单验证规则
const rules = reactive({
  nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
  energyCoin: [
    { required: true, message: '请输入能源币', trigger: 'blur' },
    { type: 'number', message: '能源币必须为数字', trigger: 'blur' }
  ],
  consumptionItem: [{ required: true, message: '请选择消费项目', trigger: 'change' }],
  workOrderNo: [{ required: true, message: '请输入工单号', trigger: 'blur' }],
  carNumber: [{ required: true, message: '请输入车牌号', trigger: 'blur' }],
  frameNo: [{ required: true, message: '请输入车架号', trigger: 'blur' }],
  consumptionAmount: [
    { required: true, message: '请输入消费金额', trigger: 'blur' },
    { type: 'number', message: '消费金额必须为数字', trigger: 'blur' }
  ],
  deductEnergyCoin: [
    { required: true, message: '请输入抵扣能量币', trigger: 'blur' },
    { type: 'number', message: '抵扣能量币必须为数字', trigger: 'blur' }
  ]
});

// 处理查询
const handleQuery = () => {
  ElMessage.info(`查询内容：${queryKey.value}`);
  // 实际开发中，这里可调用接口根据 queryKey 查询数据并更新表单
};

// 处理重置
const handleReset = () => {
  queryKey.value = '';
  // 若需要重置表单，可调用 formRef.value.resetFields()
  ElMessage.info('已重置查询条件');
};

// 处理提交
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 模拟接口提交，实际开发中替换为 axios 等请求后端接口
      ElMessage.success('提交成功');
      console.log('表单数据：', form);
      // 可根据需要重置表单或进行其他操作
    } else {
      ElMessage.error('表单验证失败，请检查');
      return false;
    }
  });
};
</script>

<style scoped>
.order-form {
  padding: 20px;
}

.query-reset {
  display: flex;
  align-items: center;
}
</style>